<template>
  <div class="con">
    <!-- 去挂号 -->
    <!-- 头部 -->
    <Header :title="'预约挂号'" />
    <!-- 搜索框 -->
    <van-search v-model="value" placeholder="搜索医院或医生" shape="round" />
    <!-- 不知道挂什么科？ -->
    <img src="../assets/Registration/banner.png" alt="" />
    <!-- 医院列表 -->
    <ul class="list">
      <li v-for="(item, index) in registrationList" :key="index">
        <img :src="item.imgUrl" alt="" />
        <div class="list-text">
          <p>{{ item.hospital }}</p>
          <p class="p-two">
            特色科室：
            <span v-for="(item1, index) in item.tsks" :key="index">
              {{ item1 }}
            </span>
          </p>
          <div class="three">
            <div>
              <img src="../assets/Registration/address.png" alt="" />
              <span>{{ item.address }}</span>
            </div>
            <div>
              <img src="../assets/Registration/small-font.png" alt="" />
              <span v-for="(item2, index) in item.tag" :key="index"
                >{{ item2 }}/</span
              >
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import { getRegistrationApi } from "../utils/api";

// import { onMounted, ref } from "vue";
export default {
  data() {
    return {
      value: "",
      registrationList: [],
    };
  },
  components: {
    Header,
  },
  mounted() {
    this.getregistrationlist();
  },
  methods: {
    async getregistrationlist() {
      const res = await getRegistrationApi();
      console.log(res);
      this.registrationList = res.result;
      console.log(this.registrationList);
    },
  },
};
</script>

<style lang="less" scoped>
.con {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  overflow-x: scroll;
  white-space: nowrap;

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
}
img {
  width: 375px;
  height: 91px;
  margin: 0 auto;
}
.list {
  display: flex;
  flex-wrap: wrap;
  li {
    list-style: none;
    height: 85px;
    width: 100%;
    padding: 16px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #edefee;
    img {
      width: 118px;
      height: 85px;
      margin: 0;
    }
    .list-text {
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      p {
        width: 200px;
        font-size: 14px;
        color: #333;
        margin: 0;
      }
      .p-two {
        font-size: 11px;
        color: #666;
        span {
          border: 1px solid #bababa;
          border-radius: 8.5px;
          padding: 2px 8px;
          margin-right: 4px;
        }
      }
      .three {
        width: 100%;
        font-size: 11px;
        color: #666;
        display: flex;
        justify-content: space-between;
        div {
          display: flex;
          align-items: center;
        }
      }
      img {
        width: 22px;
        height: 22px;
      }
    }
  }
}
</style>
